<template>
	<div id="audio_box" class="audio_box" style="opacity: 0;position: relative;z-index: -10;"></div>
	<div class="answer_page">
		<div class="answer_left">
			<div class="work_cont" v-if="!currentQuest.id">
				<img src="@/assets/image/other/add_work.png" alt="">
			</div>
			<p v-if="currentQuest.id">{{currentQuest[0]?.itemName}}</p>
			<div class="quest_sort" v-if="currentQuest.id">
				<p>{{ currentQuest.itemTopicId + 1 }}.{{ currentQuest.itemName }}</p>
				<img src="@/assets/image/other/horn.png" alt="" style="width: 5%;" @click="onHorn">
			</div>
			<div class="quest_cont" v-if="currentQuest.id">
				<img :src="currentAnswer" alt="" v-if="currentAnswer.includes('http')">
			</div>
			<p  v-if="currentQuest.id">请依次根据评分标准点击正确与否</p>
			<p  v-if="currentQuest.id">{{arrlist[scoreQuset]}}</p>
			<div class="quest_btn" v-if="currentQuest.id">
				<div :class="item?'submit':'error'" @click="onSubmit(index)" v-for="item,index in  scores" :key="item">
					{{index}}
				</div>
			</div>
		</div>
		<div class="answer_right">
			<van-search v-model="sreach" placeholder="搜索相关知识库" />
			<div class="knowledge">知识库</div>
			<div id="swipe_box">
				<van-swipe indicator-color="#58dbb0">
				  <van-swipe-item v-for="item,index in swipeList" :key="index">
					  <div v-for="itm,idx in item" :key='idx' class="swipe_item">
							<van-progress :pivot-text="status[itm.status]" :color="setCor[itm.status]" :percentage="0" stroke-width="8" />
							<p class="user_info" :style="{ color:setCor[itm.status] }">
							  <span>{{itm.userName}}</span>
							  <div class="add_btn_two"  @click="onOut(itm)" v-if="itm.status === 2">移出</div>
							</p>
					  </div>
				  </van-swipe-item>
				</van-swipe>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, watch, nextTick,onMounted,computed,render } from 'vue';
	import { useWorkBenches, useWebstock } from '@/store';
	import { showConfirmDialog, showSuccessToast  } from 'vant';
	
	const sreach = ref('');
	const Workben = useWorkBenches();
	const webstockStore = useWebstock();
	const testList = computed(()=> Workben.$state.workerPatientList);
	const swipeList = computed(()=> Workben.$state.swipeList);
	const currentAnswer = computed(()=> Workben.$state.currentAnswer);
	const currentQuest = computed(()=> Workben.$state.currentQuest);
	const status = { 2:'完成',1:'未开始',3:'需要帮助',4:'超时' };
	const setCor = { 2:'#13ce8f',1:'#ccc',3:'#f69847',4:'#ff3d00' };
	const arrlist = ['1.画出圆形','2.12个数字无遗漏','3.正确标出钟面数字','4.标出正确的时间'];
	const scoreQuset = ref(0);
	const allscore  = ref(0);
	
	const onOut = (row)=>{
		showConfirmDialog({ title: '',message: '确定移出此患者吗？',}).then(async () => {
			const res = await webstockStore.sendMessage({ messageCode:'3',userId: row.id });
			if(!res) return;
			showSuccessToast('移出成功');
			Workben.getList(true);
			Workben.getpopList(true);
		}).catch(() => {
		    showSuccessToast('取消移出');
		});
	};
	
	function getArr(arr, number){
		const result = arr.reduce((acc, curr, index) => {
		    if (index % number === 0) acc.push([])
		    acc[Math.floor(index / number)].push(curr)
		    return acc
		}, []);
		return result;
	}
	
	const scores = { '正确':1,'错误':0 };
	const onSubmit = async (row)=>{
		// const { id,name } = row;
		// const currentId = localStorage.getItem('currentId');
		// const res = await webstockStore.sendMessage({ messageCode:'7',userId: currentId,adminAnswer:name,userItemRecordAnswerId:Workben.$state.currentQuest.id });
		// if(!res) return;
		const score = scores[row];
		allscore.value += score;
		if(arrlist[scoreQuset.value + 1]){
			scoreQuset.value ++;
		}else{
			const currentId = localStorage.getItem('currentId');
			webstockStore.sendMessage({ 
				messageCode:'7',userId: currentId,adminAnswer:'得分数为'+allscore.value,
				userItemRecordAnswerId:Workben.$state.currentQuest.id ,
			});
			
		}
		// console.log(score);
	};
	
	const onHorn = ()=>{
		nextTick(()=>{
			const dom = document.getElementById("audio_box");
			const dom21 = document.querySelector("audio");
			if(!dom21){
				let audio = document.createElement("audio");
				audio.src = "./video/介绍.mp3";
				audio.id = "music1";
				audio.crossorigin = "anonymous";
				dom.appendChild(audio);
			}
			const audios = document.querySelector('audio');
			audios.play();
		});
	};
	
	watch(()=>testList.value,()=>{
		nextTick(()=>{
			const dom = document.getElementById('swipe_box');
			const itemheight = dom.clientWidth;
			const arr = getArr(testList.value, Math.floor(Number(itemheight) / 70));
			Workben.setSwipeList(arr);
		});
		// webstockStore.sendMessage({ messageCode:'6'});
	},{ immediate:true, deep:true });
	
</script>

<style lang="less" scoped>
	.work_cont{
		display: flex;
		height: 100vh;
		justify-content: center;
		align-items: center;
		img{
			width: 254px
		}
	}
	.add_btn{
		font-size: 20px;
		color: #fff;
		width: 25px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		background: #13CE8F;
		border-radius: 50%;
		&.continue{
			position: absolute;
			top:200px;
			left: 140px;
			// z-index: 10000;
		}
	}
	.answer_page{
		display: flex;
		justify-content: space-between;
		padding: 20px 0;
		height: 100%;
		width: 100%;
		.answer_left,.answer_right{
			padding: 10px;
		}
		.answer_left{
			border-right: 1px dashed #ccc;
			font-size: 14px;
		}
	}
	.answer_left{
		flex:1;
		display: flex;
		flex-direction: column;
		.quest_sort{
			padding: 5px 0;
			margin-top: 10px;
			background: linear-gradient(90deg, #13CE8F 0%, rgba(235,255,248,0.00) 103%);
			width: 100%;
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			P{
				color:#fff;
			}
		}
		.quest_cont{
			flex:4;
			background: #FFFFFF;
			border-radius: 6px;
			margin: 10px 0;
			img{
				width: 75%;
			}
		}
		.quest_btn{
			display: flex;
			justify-content: center;
			// flex-direction: column;
			flex:1;
			>div{
				width: 70px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				font-size: 14px;
				color:#fff;
				border-radius: 20px;
				margin-left: 10px;
			}
			.submit{
				background: linear-gradient(109deg, #6EE381 8%, #13CE8F 93%);
				box-shadow: 0px 4px 10px 0px rgba(29, 225, 81, 0.3),inset 0px 4px 8px 0px rgba(154, 230, 205, 0.6);
			}
			.reset{
				background: linear-gradient(109deg, #6ED3E3 8%, #5383E4 93%);
				box-shadow: 0px 4px 10px 0px rgba(83, 131, 228, 0.3),inset 0px 4px 8px 0px rgba(173, 196, 242, 0.6);
			}
			.error{
				background: linear-gradient(109deg, #E3D76E 8%, #F58E41 93%);
				box-shadow: 0px 4px 10px 0px rgba(245, 142, 65, 0.3),inset 0px 4px 8px 0px rgba(248, 211, 184, 0.6);
			}
		}
	}
	:deep(.van-search){
		padding: 0;
		height: 36px;
		>div{
			background-color: #fff;
		}
	}
	.answer_right{
		width: 250px;
		display: flex;
		flex-direction: column;
		font-size: 12px;
	}
	.knowledge{ // 知识库
		// height: 200px;
		flex:1;
	}
	#swipe_box{
		flex:1;
		width: 250px;
		border-top: 1px dashed #ccc;
		padding-top: 5px;
	}
	:deep(.van-swipe){
		height:100%;
		.van-swipe__indicators{
			bottom:0;
			.van-swipe__indicator{
				background-color: #cfd0d2;
			}
		}
	}
	.swipe_item{
		padding: 10px;
		box-shadow: 0px 3px 9px 0px rgba(19, 206, 143, 0.1);
		background: #FFFFFF;
		height: 50px;
		width: 90%;
		border-radius: 6px;
		margin-top: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.user_info{
			display: flex;
			justify-content: space-between;
		}
	}
</style>